<template>
  <div id="app">
    <loading class="pr" v-model="isLoading"></loading>
    <transition :name="'vux-pop-'+ animate">
      <router-view class="router-view"></router-view>
    </transition>
    <toast v-model="success" :type="type" position="top">{{successMsg}}</toast>
    <!--登陆组件-->
    <x-dialog v-model='LoginShow' :scroll='false' ref="xd" @click.native="hiddenLogin($event.target)">
      <div class=login>
        <div class='mobile pr'>
          <span>手机号</span>
          <i></i>
          <input pattern="[0-9]*" type="text" placeholder='输入手机号' maxlength="11" @keyup="verifyPhone(phoneNumber)"
                 v-model="phoneNumber">
          <input type="button" class="pa get-code" bg='pink' @click="getCode($event)" value="获取验证码">
        </div>
        <div class="verify">
          <span>验证码</span>
          <i></i>
          <input pattern="[0-9]*" type="text" placeholder="输入验证码" maxlength="4" @keyup="verifyVrifyCode(verifyCode)"
                 v-model="verifyCode">
        </div>
        <div style="margin: 25px auto  15px auto">
          <!--登陆成功需要发送状态-->
          <input type="button" style="width: 100%;height: 100%;" bg='pink' @click='login($event)' value="确定">
        </div>
        <p style="font-size: 13px;color: #666">为了防止恶意刷票，请验证您的手机</p>
      </div>
    </x-dialog>
    <!--分享成功-->
    <x-dialog v-model='shareStatus' :scroll='false' :dialog-style="{height:'175px'}"
              @click.native="hiddenShare($event.target)">
      <div class="suc-box">
        <div class="suc-img"></div>
        <p style="font-size: 15px;color: #333;">分享成功，获得一票</p>
        <p style="font-size: 13px;color: #666 ;margin: 10px 0;">分享给更多好友为你投票吧~</p>
        <button style="background: #ed007c;color: #fff;height: 40px;width: 50%;border-radius: 5px;"
                @click='hiddenShare1'>知道了
        </button>
      </div>
    </x-dialog>
  </div>
</template>

<script>
  import {Loading, XDialog, md5, base64, Toast} from 'vux'
  import  {getLogin, getToken, getFansCard, getAdminMsg} from './api'
  import {mapState} from 'vuex'
  export default {
    name: 'app',
    data(){
      return {
        phoneNumber: "", //手机号码
        verifyCode: '',  //验证码
        success: false,  //Toast弹窗显示
        successMsg: '',  //弹窗信息
        type: 'success', //弹窗类型
      }
    },

    methods: {
      //        验证手机号码
      verifyPhone(phone) {
        var mob = document.querySelector('.mobile');
        if (!(/^1(3|4|5|7|8)\d{9}$/.test(Number(phone)))) {
          mob.classList.add('red');
          return false;
        } else {
          mob.classList.remove('red');
          return true;
        }
      },
      // 验证验证码
      verifyVrifyCode(code) {
        var vri = document.querySelector('.verify');
        // 长度为4的纯数字
        if (!(/^\d{4}$/.test(code))) {
          vri.classList.add('red');
          return false;
        } else {
          vri.classList.remove('red');
          return true;
        }
      },
      // 获取验证码
      getCode(e) {
        // 当点击时先获取手机的长度及是否符合规则 验证手机号码  接收返回值
        if (!this.verifyPhone(this.phoneNumber)) return;  // 如果为假
        var e = e.target;
        e.setAttribute('disabled', 'disabled');
        var time = 60; // 时长
        e.value = time;
        e.style.width = '30px';
        e.style.transform = 'translateY(-50%) rotate(360deg)';
        //手机号码加密
        var mobile = base64.encode(this.phoneNumber);
        var paramsM = { // 获取验证码
          params: {
            mobile: mobile
          }
        };
        this.$http.get(getLogin(), paramsM).then(res => {
          // 判断验证码
          this.successMsg = res.data.message;
          this.success = true
        });
        //  重新发送
        var timer = setInterval(() => {
          time--;
          e.value = time;
          if (!time) {
            time = 0;
            clearInterval(timer);
            e.style.width = '3rem';
            e.style.transform = 'translateY(-50%) rotate(0deg)';
            e.removeAttribute('disabled');
            setTimeout(() => {
              e.value = '获取验证码';
            }, 300)
          }
        }, 1000)
      },
      // 点击登陆
      login(e) {
        var e = e.target;
        e.setAttribute('disabled', 'disabled');
        if (this.verifyPhone(this.phoneNumber) && this.verifyVrifyCode(this.verifyCode)) {
          let mobile = base64.encode(this.phoneNumber);// 手机号码加密
          let verifyCode = md5(this.verifyCode);       // 验证码md5加密
          //  发送请求
          var params = {   // 获取token配置
            params: {
              mobile: mobile,    //  手机号码
              code: verifyCode   //  验证码
            }
          };
          this.$http.get(getToken(), params).then(res => {
            if (res.data.error == 0) { // 0 代表成功获取token
              window.localStorage.setItem('token', res.data.token);
              window.localStorage.setItem('member_id', res.data.data.member_id);
              this.$http.get(getAdminMsg(res.data.token)).then(res => {
                this.$store.commit('roleChange', {
                  adminMsg: res.data.data,
                });
              });
              this.$store.commit('loginChange', { // 登陆成功
                isLogin: true
              });
              this.$store.commit('showLogin', {   //　隐藏弹窗
                LoginShow: false
              });
//              window.location.reload();
//              window.history.go(0)
            } else { // 错误验证码
              this.type = 'warn';
              this.success = true;
              this.successMsg = res.data.message;
            }
          });
        } else {
          this.type = 'warn';
          this.success = true;
          this.successMsg = '信息有误';
        }
        e.removeAttribute('disabled');
      },
      hiddenLogin(e){
        var share = document.querySelectorAll('.weui-mask')[2];
        if (e == share) {
          this.$store.commit('showLogin', {   //　隐藏弹窗
            LoginShow: false
          });
        }
      },
      hiddenShare(e){
        var share = document.querySelectorAll('.weui-mask')[3];
        if (e == share) {
          this.$store.commit('shareChange', {   //　隐藏弹窗
            isShare: false
          });
        }
      },
      hiddenShare1(){
        this.$store.commit('shareChange', {   //　隐藏弹窗
          isShare: false
        });
      }
    },
    computed: {
      ...mapState({
        isLoading: state => state.vux.isLoading,
        // 定义登陆状态是否显示
        LoginShow: state => state.vux.LoginShow,
        shareStatus: state => state.vux.isShare,
        animate: state => state.vux.animate, // 动画
        isLogin: state => state.vux.isLogin
      })
    },
    components: {
      Loading,
      XDialog,
      Toast
    },
  }
</script>

<style lang='less' rel="stylesheet/less" type="text/less">
  @import '~vux/src/styles/reset.less';
  @import "./style/base.less";

  .vux-toast {
    font-size: large;
  }

  .weui-toast {
    font-size: large;

  }

  .router-view {
    width: 100%;
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .red {
    box-sizing: border-box;
    color: red;
    border: 1px solid red;
  }

  .login {
    height: 224px;

    button {
      color: #fff;
      display: block;
      background: #ed007c;
    }
    input[type='text'] {
      background: none;
      font-size: 14px;
      padding-left: 8px;
      flex: 1;
      -webkit-flex: 1; /* Chrome */
      height: 100%;
      -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 1; /* OLD - Firefox 19- */
      width: 20%; /* For old syntax, otherwise collapses. */

    }
    span {
      /*display: inline-block;*/
      /*float: left;*/
      text-align: center;
      color: #666;
      width: 2.5rem;
      float: left;

    }
    > div {
      font-size: 15px;
      width: 90%;
      height: 40px;
      border-radius: 20px;
      overflow: hidden;
      background: #eee;
      margin: 0 auto;
      > i {
        display: inline-block;
        transform: scaleX(.5);
        height: 20px;
        border: 1px solid #999;
      }
    }

    .mobile {
      margin: 25px auto 10px auto;
    }
    .mobile, .verify {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      -webkit-align-items: center;
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flex;
    }
    // 获取验证码
    .get-code {
      transition: all .6s;
      right: 5px;
      width: 3rem;
      font-size: 12px;
      height: 30px;
      border-radius: 22px;
      line-height: 22px;
      top: 50%;
      transform: translateY(-50%) rotate(0deg);
    }
  }

  .vux-pop-out-enter-active,
  .vux-pop-out-leave-active,
  .vux-pop-in-enter-active,
  .vux-pop-in-leave-active {
    will-change: transform;
    transition: all 400ms;
    -webkit-transition: all 400ms;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    perspective: 1000;
    -webkit-perspective: 1000;
  }

  .vux-pop-out-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  .vux-pop-out-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .vux-pop-in-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
  }

  .vux-pop-in-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
  }

  // 分享成功
  .suc-box {
    .suc-img {
      margin: 10px auto 15px auto;
      background: url("../static/images/fenxcgong.png") no-repeat;
      width: 60px;
      height: 33px;
      background-size: cover;
    }
  }

</style>
